// src/components/popups/sponsorOverview/scholarshipsByProgram/SearchForm.tsx

import type { FC } from 'react';
import { useState } from 'react';

export interface ScholarshipsByProgramSearchParams {
  startYear?: number;
  endYear?: number;
  status: string;
  programCode?: string;
}

interface Props {
  onSearch: (params: ScholarshipsByProgramSearchParams) => void;
}

const SearchForm: FC<Props> = ({ onSearch }) => {
  const [startYear, setStartYear] = useState<number | undefined>();
  const [endYear, setEndYear] = useState<number | undefined>();
  const [status, setStatus] = useState('');
  const [programCode, setProgramCode] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch({ startYear, endYear, status, programCode });
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 items-end text-xs sm:text-sm md:text-base bg-white dark:bg-slate-900 rounded-2xl shadow p-4 w-full border border-gray-200 dark:border-slate-800"
    >
      {/* Start Year */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1 text-xs sm:text-sm md:text-base">Start Year</label>
        <input
          type="number"
          value={startYear ?? ''}
          onChange={(e) => {
            const value = e.target.value;
            setStartYear(value === '' ? undefined : Number(value));
          }}
          className="w-full border rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition text-xs sm:text-sm md:text-base bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-slate-700"
        />
      </div>

      {/* End Year */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1 text-xs sm:text-sm md:text-base">End Year</label>
        <input
          type="number"
          value={endYear ?? ''}
          onChange={(e) => {
            const value = e.target.value;
            setEndYear(value === '' ? undefined : Number(value));
          }}
          className="w-full border rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition text-xs sm:text-sm md:text-base bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-slate-700"
        />
      </div>

      {/* Status */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1 text-xs sm:text-sm md:text-base">Status</label>
        <select
          value={status}
          onChange={(e) => setStatus(e.target.value)}
          className="w-full border rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition text-xs sm:text-sm md:text-base bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-slate-700"
        >
          <option value="">All</option>
          <option value="current">Current</option>
          <option value="not_current">Not Current</option>
        </select>
      </div>

      {/* Program Code */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1 text-xs sm:text-sm md:text-base">Program Code</label>
        <select
          value={programCode}
          onChange={(e) => setProgramCode(e.target.value)}
          className="w-full border rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition text-xs sm:text-sm md:text-base bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-slate-700"
        >
          <option value="">All</option>
          <option value="ACT">ACT</option>
          <option value="BIS">BIS</option>
          <option value="ELC">ELC</option>
          <option value="CMP">CMP</option>
        </select>
      </div>

      {/* Submit Button */}
      <div className="sm:col-span-2 lg:col-span-3 flex justify-center mt-2">
        <button
          type="submit"
          className="bg-blue-600 dark:bg-cyan-700 text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-cyan-800 focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 transition text-base font-bold tracking-wide text-xs sm:text-sm md:text-base"
        >
          Search
        </button>
      </div>
    </form>
  );
};

export default SearchForm;